<template>
    <view class="flex flex-row flex-row-center-start" @click.stop="">
        <view v-for="(item,index) in _count" :key="item" :class="[`pr-${gutter}`,props.disabled?'opacity-5':'']">
            <tm-icon  :follow-dark="false" :color="(item<=_start?_color:'grey-2')" @click="startClick(item)" :font-size="props.size" :name="props.icon"  ></tm-icon>
        </view>
        <slot><TmText :dark="isDark"  v-if="showLabel" :color="_color" :label="_label"></TmText></slot>
    </view>    
</template>
<script lang="ts" setup>
import { computed,ref, watch,getCurrentInstance,inject, toRaw } from 'vue';
import tmIcon from '../tm-icon/tm-icon.vue';
import { inputPushItem, rulesItem } from "./../tm-form-item/interface"
import { custom_props,computedDark } from '../../tool/lib/minxs';
import { useTmpiniaStore } from '../../tool/lib/tmpinia';
import TmText from '../tm-text/tm-text.vue';
const store = useTmpiniaStore();
const emits = defineEmits(['click','change','update:modelValue'])
const proxy = getCurrentInstance()?.proxy??null;
const props = defineProps({
    ...custom_props,
    count:{
        type:Number,
        default:5
    },
    modelvalue:{
        type:Number,
        default:0
    },
    defaultValue:{
        type:Number,
        default:0
    },
    //只读式，样式无变化，可以触发点击事件，但同样无法切换数值。
    readonly:{
        type:Boolean,
        default:false
    },
    //禁用后无法点击和切换值
    disabled:{
        type:Boolean,
        default:false
    },
    icon:{
        type:String,
        default:'tmicon-collection-fill'
    },
    size:{
        type:Number,
        default:42
    },
    //可以是数据也可以是单独主题名称。如果出现多个主题名称时。颜色将会对应count出现。比如1星是红，2星是蓝。依此类推。
    color:{
        type:[Array,String],
        default:'orange'
    },
    //图标之间的间距
    gutter:{
        type:Number,
        default:16
    },
    	//是否跟随全局主题的变换而变换
	followTheme: {
		type: [Boolean, String],
		default: true
	},
	//暗黑
	dark: {
		type: [Boolean, String],
		default: false
	},
	//是否跟随主题全局切换暗黑模式。
	followDark: {
		type: [Boolean, String],
		default: true
	},
    //需要展示在右边的分值，默认为空即显示星数值。如果提供了其它值，就不显示默认的，比如9.6分
    label:{
        type:String,
        default:''
    },
    showLabel:{
        type:Boolean,
        default:false
    }
})

const _count = computed(()=>props.count)
const _start = ref(props.defaultValue)
// 设置响应式全局组件库配置表。
const tmcfg = computed(() => store.tmStore);
const isDark = computed(() => computedDark(props, tmcfg.value));
const _color = computed(()=>{
    if(props.followTheme&&tmcfg.value.color) return tmcfg.value.color;
    if(typeof props.color == 'string') return props.color;
    if(Array.isArray(props.color)){
        if(props.color[_start.value-1]){
            return props.color[_start.value-1]
        }
        return props.color[props.color.length-1];
    }
    return 'grey-2'
})
const _label = computed(()=>{
    if(props.label!='') return props.label;
    return _start.value+'.0';
})
const _blackValue = _start.value
watch(()=>props.modelvalue,()=>{
    let valueStart = props.modelvalue>=_count.value?_count.value:props.modelvalue
    _start.value =valueStart<=0?0:valueStart
})
function startClick(index:number){
    if(props.disabled) return;
    if(props.readonly){
         emits('click',index-1)
         return;
    }
    _start.value = index;
    emits('change',_start.value)
    emits('update:modelValue',_start.value)
    emits('click',index-1)
}

</script>